<template>
	<view class="feedback-container">
		<!-- 搜索和创建按钮区域 -->
		<view class="search-create-container">
			<!-- 搜索框 -->
			<view class="search-input-container">
				<view class="search-icon">
          <text class="iconfont icon-icon-test"></text>
        </view>
				<input class="search-input" v-model="searchKeyword" placeholder="搜索反馈内容..."
					placeholder-class="search-placeholder" @input="handleSearch" @confirm="handleSearchConfirm" />
				<view v-if="searchKeyword" class="clear-btn" @click="clearSearch">
					<text>✕</text>
				</view>
			</view>

			<!-- 创建反馈按钮 -->
			<view class="create-feedback-btn" @click="showModal = true">
				<text class="create-btn-text">创建反馈</text>
			</view>
		</view>

		<!-- 筛选区域 -->
		<view class="filter-section">

			<u-subsection @change="changeStatus" active-color="#1CC46D" :list="['待处理', '已处理']"
				:current="STATUS_CHOICES"></u-subsection>
		</view>

		<view class="filter-section">
			<u-subsection @change="changeType" active-color="#1CC46D" :list="['问题反馈', '建议反馈', '其他反馈']"
				:current="FEEDBACK_TYPE_CHOICES"></u-subsection>
		</view>

		<!-- 加载状态 -->
		<view v-if="loading" class="loading-container">
			<view class="loading-spinner"></view>
			<text class="loading-text">加载中...</text>
		</view>

		<!-- 错误提示 -->
		<view v-else-if="error" class="error-container">
			<text class="error-text">{{ error }}</text>
			<view class="retry-btn" @click="fetchFeedbackList">
				<text class="retry-text">重试</text>
			</view>
		</view>

		<!-- 空数据提示 -->
		<view v-else-if="feedbackList.length === 0" class="empty-container">
			<text class="empty-text">暂无反馈记录</text>
		</view>

		<!-- 反馈列表 -->
		<view v-else class="feedback-list" @scrolltolower="loadMore">
			<view v-for="(item, index) in feedbackList" :key="index" class="feedback-item">
				<!-- 用户信息 -->
				<view class="user-info">
					<text class="username">{{ item.user.username }}</text>
					<text class="user-role">{{ UserInfo.role.message }}</text>
				</view>

				<!-- 反馈类型和状态 -->
				<view class="feedback-meta">
					<text class="feedback-type">{{ item.feedback_type.message }}</text>
					<text class="feedback-status" :class="`status-${item.status.code}`">{{ item.status.message }}</text>
				</view>

				<!-- 反馈内容 -->
				<view class="feedback-content">
					<text>{{ item.content }}</text>
				</view>

				<!-- 处理人信息 -->
				<view v-if="item.handler && item.handler.username" class="handler-info">
					<text class="handler-label">处理人：</text>
					<text class="handler-name">{{ item.handler.username }}</text>
				</view>

				<!-- 处理结果 -->
				<view v-if="item.result" class="result-info">
					<text class="result-label">处理结果：</text>
					<text class="result-content">{{ item.result }}</text>
				</view>

				<!-- 图片展示 -->
				<view v-if="item.images && item.images.length > 0" class="images-container">
					<view v-for="(image, imgIndex) in item.images" :key="imgIndex" class="image-item"
						@click="previewImage(image.url)">
						<u-image width="100%" height="100%" :src="SERVER_BASE_URL + image.url" mode="aspectFill">
							<template #loading>
								<u-loading></u-loading>
							</template>
							<template #error>
								<view style="font-size: 24rpx;">加载失败</view>
							</template>
						</u-image>
						<text class="image-type">{{ image.photo_type.message }}</text>
					</view>
				</view>

				<!-- 操作按钮 -->
				<view v-if="UserInfo.role.code === 1 && item.status.code === 1" class="action-buttons">
					<view class="handle-feedback-btn" @click="navigateToHandleFeedback(item.feedback_id)">
						<text class="handle-btn-text">处理反馈</text>
					</view>
				</view>

				<!-- 时间信息 -->
				<view class="time-info">
					<text class="create-time">提交时间：{{ item.create_time }}</text>
					<text v-if="item.update_time" class="update-time">更新时间：{{ item.update_time }}</text>
				</view>
			</view>

			<!-- 加载更多提示 -->
			<view v-if="loadingMore" class="loading-more">
				<text>加载更多...</text>
			</view>

			<!-- 没有更多数据提示 -->
			<view v-if="!hasMore" class="no-more">
				<text>没有更多数据了</text>
			</view>
		</view>

		<!-- 模态框 -->
		<u-popup border-radius="48" mode="center" v-model="showModal">
      <scroll-view scroll-y="true" style="height: auto;">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">创建反馈</text>
					<view class="close-btn" @click="closeModal">
						<text class="close-text">×</text>
					</view>
				</view>
				<view class="modal-body">
					<!-- 反馈类型选择 -->
					<view class="form-item">
						<text class="form-label">反馈类型 *</text>
						<view class="feedback-type-options">
							<view v-for="type in feedbackTypes" :key="type.value" class="type-option"
								:class="{ active: formData.feedback_type === type.value }"
								@click="formData.feedback_type = type.value">
								<text class="type-text">{{ type.label }}</text>
							</view>
						</view>
						<text v-if="formErrors.feedback_type" class="error-text">{{ formErrors.feedback_type }}</text>
					</view>

					<!-- 反馈内容 -->
					<view class="form-item">
						<text class="form-label">反馈内容 *</text>
						<textarea class="content-input" v-model="formData.content" placeholder="请输入您的反馈内容"
							placeholder-class="placeholder-text" maxlength="500"></textarea>
						<text class="char-count">{{ formData.content.length }}/500</text>
						<text v-if="formErrors.content" class="error-text">{{ formErrors.content }}</text>
					</view>

					<!-- 图片上传 -->
					<view class="form-item">
						<text class="form-label">上传图片（最多9张）</text>
						<view class="image-upload-section">
							<!-- 图片选择按钮 -->
							<view class="add-image-btn" @click="chooseImage"
								:class="{ disabled: images.length >= 9 || uploading }">
								<view class="add-icon">+</view>
								<text class="add-text">{{ images.length }}/9</text>
							</view>

							<!-- 图片预览区域 -->
							<view v-for="(image, index) in images" :key="index" class="image-preview-item"
								@click="previewUploadingImage(index)">
								<u-image width="100%" height="100%" :src="image.url" mode="aspectFill"></u-image>
								<view class="delete-btn" @click.stop="deleteImage(index)">
									<text class="delete-icon">×</text>
								</view>

								<!-- 上传中状态 -->
								<view v-if="image.status === 'uploading'" class="uploading-overlay">
									<view class="loading-spinner"></view>
								</view>

								<!-- 上传失败状态 -->
								<view v-if="image.status === 'error'" class="image-status-indicator">
									上传失败
								</view>

								<!-- 上传成功状态 -->
								<view v-if="image.status === 'success'" class="image-status-indicator">
									上传成功
								</view>
							</view>
						</view>
						<text class="upload-tip">支持JPG、PNG等格式，单张不超过5MB</text>

						<!-- 上传进度条 -->
						<view v-if="uploading" class="progress-container">
							<view class="progress-bar">
								<view class="progress-fill" :style="{ width: uploadProgress + '%' }"></view>
							</view>
							<text class="progress-text">{{ uploadProgress }}%</text>
						</view>

						<!-- 图片上传状态提示 -->
						<view v-if="images.length > 0" class="upload-status">
							<view v-for="(image, index) in images" :key="index" class="image-status">
								<text class="image-name">{{ image.name || '图片 ' + (index + 1) }}</text>
								<view class="status-container">
									<text :class="['status-badge', 'status-' + image.status]">
										{{ image.status === 'pending' ? '等待上传' : 
                       image.status === 'uploading' ? '上传中' : 
                       image.status === 'success' ? '上传成功' : 
                       '上传失败' }}
									</text>
									<!-- 重试按钮 -->
									<button v-if="image.status === 'error' && !uploading" class="retry-btn"
										@click="retrySingleImage(index)">
										重试
									</button>
								</view>
							</view>
						</view>
					</view>

					<!-- 提交按钮 -->
					<view style="text-align: right;">
						<u-button size="medium" :loading="submitting || uploading" class="submit-btn"
							@click="submitFeedback" :class="{ disabled: submitting || uploading }">提交</u-button>

					</view>
				</view>
			</view>
      </scroll-view>
		</u-popup>

		<!-- 提示消息 -->
		<view v-if="showMessage" class="toast" :class="messageType">
			<text class="toast-text">{{ messageContent }}</text>
		</view>
	</view>
    <u-back-top top="600" :scroll-top="scrollTop"></u-back-top>

</template>

<script setup>
import { onPageScroll } from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		onMounted,
	} from 'vue';
	import {
		get_feedback_list,
		create_feedback,
		upload_feedback_image,
		SERVER_BASE_URL
	} from '@/static/apis/wzry';
	import {
		readLocalStorage
	} from '@/static/js/hub';
  

	// 服务器基础URL

	// 状态管理
	const feedbackList = ref([]);
  const scrollTop = ref(0)

	const loading = ref(false);
	const loadingMore = ref(false);
	const error = ref('');
	const currentPage = ref(1);
	const pageSize = ref(10);
	const hasMore = ref(true);
	const FEEDBACK_TYPE_CHOICES = ref(0)
	const STATUS_CHOICES = ref(0)
	const UserInfo = ref(readLocalStorage('userInfo'))
	// 搜索关键字
	const searchKeyword = ref('')
	let searchTimeout = null
	// 监听页面滚动事件
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});

	// 处理搜索输入
	const handleSearch = () => {
		// 防抖处理，避免频繁请求
		if (searchTimeout) {
			clearTimeout(searchTimeout)
		}

		searchTimeout = setTimeout(() => {
			// 重置页码，重新加载数据
			currentPage.value = 1
			feedbackList.value = []
			fetchFeedbackList()
		}, 300)
	}



	// 处理搜索确认（回车搜索）
	const handleSearchConfirm = () => {
		if (searchTimeout) {
			clearTimeout(searchTimeout)
		}
		// 重置页码，重新加载数据
		currentPage.value = 1
		feedbackList.value = []
		fetchFeedbackList()
	}

	// 清空搜索
	const clearSearch = () => {
		searchKeyword.value = ''
		// 重置页码，重新加载数据
		currentPage.value = 1
		feedbackList.value = []
		fetchFeedbackList()
	}

	// 模态框状态
	const showModal = ref(false);
	const submitting = ref(false);
	const formErrors = ref({});
	// 提示消息
	const showMessage = ref(false);
	const messageType = ref('success'); // 'success' 或 'error'
	const messageContent = ref('');

	// 图片上传相关状态
	const images = ref([]); // 存储待上传的图片
	const uploading = ref(false); // 上传中状态
	const uploadProgress = ref(0); // 上传进度
	const supportedFormats = ['jpg', 'jpeg', 'png', 'gif', 'webp']; // 支持的图片格式
	const currentFeedbackId = ref(''); // 当前反馈的ID，用于图片上传和重试

	// 显示提示消息
	const showToast = (type, content) => {
		messageType.value = type;
		messageContent.value = content;
		showMessage.value = true;
		// 2秒后自动隐藏
		setTimeout(() => {
			showMessage.value = false;
		}, 2000);
	};

	// 提交反馈
	const submitFeedback = async () => {
		// 验证表单
		if (!validateForm()) {
			return;
		}

		try {
			// 设置提交中状态
			submitting.value = true;

			// 调用API提交反馈
			const response = await create_feedback(formData);

			// 提交成功
			if (response.code === 0) {
				const feedbackId = response.data.feedback_id;
				// 保存当前反馈ID，用于图片上传和重试
				currentFeedbackId.value = feedbackId;

				// 如果有图片需要上传
				if (images.value.length > 0) {
					showToast('success', '反馈创建成功，开始上传图片...');

					// 设置上传中状态
					uploading.value = true;
					uploadProgress.value = 0;

					// 循环上传图片
					await uploadImagesSequentially(feedbackId);
				}

				showToast('success', '反馈提交成功');
				// 关闭模态框
				closeModal();
				// 重新加载反馈列表
				currentPage.value = 1;
				feedbackList.value = [];
				fetchFeedbackList();
			} else {
				showToast('error', response.msg || '提交失败，请稍后重试');
			}
		} catch (error) {
			console.error('提交反馈失败:', error);
			showToast('error', '网络错误，请稍后重试');
		} finally {
			// 重置提交状态
			submitting.value = false;
			uploading.value = false;
		}
	};

	// 循环上传图片
	const uploadImagesSequentially = async (feedbackId) => {
		const totalImages = images.value.length;
		let uploadedCount = 0;

		for (let i = 0; i < totalImages; i++) {
			const image = images.value[i];

			// 只上传未成功的图片
			if (image.status !== 'success') {
				// 添加重试次数记录
				if (!image.retryCount) {
					image.retryCount = 0;
				}

				// 执行带重试的上传
				const success = await uploadWithRetry(image, feedbackId, i);
				if (success) {
					uploadedCount++;
					// 更新上传进度
					uploadProgress.value = Math.floor((uploadedCount / totalImages) * 100);
				}
			} else {
				// 已经成功的图片
				uploadedCount++;
			}
		}

		// 检查是否有上传失败的图片
		const failedImages = images.value.filter(img => img.status === 'error');
		if (failedImages.length > 0) {
			showToast('error', `部分图片上传失败，共成功上传 ${uploadedCount}/${totalImages} 张`);
			// 可以在这里提示用户是否重试
			setTimeout(() => {
				uni.showModal({
					title: '上传失败',
					content: `有 ${failedImages.length} 张图片上传失败，是否重试？`,
					success: function(res) {
						if (res.confirm) {
							retryFailedUploads(feedbackId);
						}
					}
				});
			}, 1500);
		}
	};

	// 带重试机制的图片上传
	const uploadWithRetry = async (image, feedbackId, index) => {
		console.log('上传图片', image, feedbackId, index);

		const MAX_RETRIES = 3;
		let lastError = null;

		for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
			if (attempt > 0) {
				// 记录重试次数
				image.retryCount++;
				showToast('warning', `正在重试上传图片 ${index + 1}（${attempt}/${MAX_RETRIES}）...`);

				// 指数退避策略
				const delay = Math.pow(2, attempt - 1) * 1000;
				await new Promise(resolve => setTimeout(resolve, delay));
			}

			try {
				// 更新图片状态
				image.status = 'uploading';

				// 使用uni.uploadFile上传图片
				const uploadResult = await uploadImageFile({
					url: SERVER_BASE_URL + 'api/feedback/upload_feedback_image/',
					filePath: image.url,
					name: 'image',
					formData: {
						feedback_id: feedbackId
					}
				});

				// 解析上传结果
				const uploadResponse = JSON.parse(uploadResult.data);

				if (uploadResponse.code === 0) {
					image.status = 'success';
					return true;
				} else {
					// 服务器返回错误，通常不需要重试
					image.status = 'error';
					image.errorMsg = uploadResponse.msg || '服务器错误';
					showToast('error', `图片 ${index + 1} 上传失败: ${image.errorMsg}`);
					return false;
				}
			} catch (error) {
				lastError = error;
				console.error(`上传图片失败 (${index + 1}/尝试${attempt + 1}):`, error);
				// 网络错误可能需要重试
			}
		}

		// 达到最大重试次数
		image.status = 'error';
		image.errorMsg = lastError ? lastError.errMsg || '网络异常' : '未知错误';
		showToast('error', `图片 ${index + 1} 上传失败（已重试${MAX_RETRIES}次）`);
		return false;
	};

	// 重试失败的上传
	const retryFailedUploads = async (feedbackId) => {
		uploading.value = true;
		uploadProgress.value = 0;

		try {
			await uploadImagesSequentially(feedbackId);
		} finally {
			uploading.value = false;
		}
	};

	// 重试单张图片
	const retrySingleImage = async (index) => {
		const image = images.value[index];
		if (!image || image.status !== 'error') return;

		// 这里需要获取feedbackId，可能需要从某个地方存储或重新获取
		// 假设我们通过重新提交反馈来获取新的ID
		// 但实际上，我们应该在第一次提交成功后保存feedbackId
		const feedbackId = getFeedbackId();
		if (!feedbackId) {
			showToast('error', '无法获取反馈ID，请重新提交反馈');
			return;
		}

		uploading.value = true;
		try {
			const success = await uploadWithRetry(image, feedbackId, index);
			if (success) {
				// 重新计算进度
				const uploadedCount = images.value.filter(img => img.status === 'success').length;
				uploadProgress.value = Math.floor((uploadedCount / images.value.length) * 100);
			}
		} finally {
			uploading.value = false;
		}
	};

	// 获取反馈ID
	const getFeedbackId = () => {
		return currentFeedbackId.value;
	};

	// 封装uni.uploadFile为Promise
	const uploadImageFile = (options) => {
		return new Promise((resolve, reject) => {
			uni.uploadFile({
				...options,
				success: (res) => {
					resolve(res);
				},
				fail: (error) => {
					reject(error);
				}
			});
		});
	};

	// 表单数据
	const formData = reactive({
		feedback_type: '',
		content: ''
	});

	// 验证表单
	const validateForm = () => {
		formErrors.value = {};
		let isValid = true;

		// 验证反馈类型
		if (!formData.feedback_type) {
			formErrors.value.feedback_type = '请选择反馈类型';
			isValid = false;
		}

		// 验证反馈内容
		if (!formData.content || formData.content.trim() === '') {
			formErrors.value.content = '请输入反馈内容';
			isValid = false;
		} else if (formData.content.trim().length < 5) {
			formErrors.value.content = '反馈内容至少需要5个字符';
			isValid = false;
		}

		return isValid;
	};

	// 反馈类型选项
	const feedbackTypes = [{
			label: '问题反馈',
			value: '1'
		},
		{
			label: '建议反馈',
			value: '2'
		},
		{
			label: '其他反馈',
			value: '3'
		}
	];

	// 关闭模态框
	const closeModal = () => {
		showModal.value = false;
		// 重置表单数据
		formData.feedback_type = '';
		formData.content = '';
		formErrors.value = {};
		// 清空图片列表和状态
		images.value = [];
		uploading.value = false;
		uploadProgress.value = 0;
		currentFeedbackId.value = '';
	};

	// 选择图片
	const chooseImage = async () => {
		// 计算还可以选择的图片数量
		const remainingCount = 9 - images.value.length;

		if (remainingCount <= 0) {
			showToast('error', '最多只能上传9张图片');
			return;
		}

		try {
			const res = await uni.chooseImage({
				count: remainingCount,
				sourceType: ['album', 'camera'] // 支持从相册和相机选择
			});

			// 处理选择的图片
			for (const tempFile of res.tempFiles) {
				// 检查文件大小（5MB限制）
				if (tempFile.size > 5 * 1024 * 1024) {
					showToast('error', `图片${tempFile.name}超过5MB限制`);
					continue;
				}

				// 检查文件格式，添加对tempFile.name是否存在的检查
				let fileExtension = '';
				if (tempFile.name) {
					fileExtension = tempFile.name.split('.').pop()?.toLowerCase() || '';
				} else if (tempFile.path) {
					// 如果name不存在，尝试从path中获取扩展名
					fileExtension = tempFile.path.split('.').pop()?.toLowerCase() || '';
				}
				
				// 如果无法获取扩展名或不支持的格式，跳过验证或默认允许
				if (fileExtension && !supportedFormats.includes(fileExtension)) {
					showToast('error', `不支持的图片格式: ${fileExtension}`);
					continue;
				}

				// 添加到图片列表
				images.value.push({
					url: tempFile.path,
					name: tempFile.name,
					size: tempFile.size,
					status: 'pending' // pending, uploading, success, error
				});
			}
		} catch (error) {
			if (error.errMsg !== 'chooseImage:fail cancel') {
				console.error('选择图片失败:', error);
				showToast('error', '选择图片失败，请重试');
			}
		}
	};

	// 获取反馈列表
	const fetchFeedbackList = async () => {
		loading.value = true;
		error.value = '';
		currentPage.value = 1;
		feedbackList.value = [];
		hasMore.value = true;

		try {
			// 构建请求参数
			const params = {
				page: currentPage.value,
				page_size: pageSize.value
			};

			// 添加筛选条件
			if (FEEDBACK_TYPE_CHOICES.value !== 'all') {
				params.feedback_type = FEEDBACK_TYPE_CHOICES.value + 1;
			}

			if (STATUS_CHOICES.value !== 'all') {
				params.status = STATUS_CHOICES.value + 1;
			}

			// 添加搜索关键字
			if (searchKeyword.value.trim()) {
				params.search = searchKeyword.value.trim();
			}

			const response = await get_feedback_list(params);

			if (response.code === 0) {
				feedbackList.value = response.data || [];
				// 检查是否还有更多数据
				if ((response.data && response.data.length < pageSize.value) || !response.data) {
					hasMore.value = false;
				}
			} else {
				error.value = response.message || '获取反馈列表失败';
			}
		} catch (err) {
			error.value = err.message || '网络异常，请稍后重试';
			console.error('获取反馈列表失败:', err);
		} finally {
			loading.value = false;
		}
	};

	// 加载更多数据
	const loadMore = async () => {
		if (loadingMore.value || !hasMore.value) return;

		loadingMore.value = true;
		currentPage.value++;

		try {
			// 构建请求参数
			const params = {
				page: currentPage.value,
				page_size: pageSize.value
			};

			// 添加筛选条件
			if (FEEDBACK_TYPE_CHOICES.value !== 'all') {
				params.feedback_type = FEEDBACK_TYPE_CHOICES.value + 1;
			}

			if (STATUS_CHOICES.value !== 'all') {
				params.status = STATUS_CHOICES.value + 1;
			}

			const response = await get_feedback_list(params);

			if (response.code === 0) {
				const newData = response.data || [];
				feedbackList.value = [...feedbackList.value, ...newData];

				// 检查是否还有更多数据
				if (newData.length < pageSize.value) {
					hasMore.value = false;
				}
			}
		} catch (err) {
			console.error('加载更多反馈失败:', err);
			// 加载失败时回滚页码
			currentPage.value--;
		} finally {
			loadingMore.value = false;
		}
	};

	// 切换反馈类型筛选
	const changeType = (type) => {
		FEEDBACK_TYPE_CHOICES.value = type;
		fetchFeedbackList();
	};

	// 切换状态筛选
	const changeStatus = (status) => {

		STATUS_CHOICES.value = status;
		fetchFeedbackList();
	};

	// 预览图片
	const previewImage = (imageUrl) => {
		const fullUrl = SERVER_BASE_URL + imageUrl;
		uni.previewImage({
			urls: [fullUrl],
			current: 0
		});
	};

	// 预览待上传的图片
	const previewUploadingImage = (index) => {
		const urls = images.value.map(img => img.url);
		uni.previewImage({
			urls: urls,
			current: index
		});
	};

	// 删除图片
	const deleteImage = (index) => {
		images.value.splice(index, 1);
	};

	// 跳转到处理反馈页面
	const navigateToHandleFeedback = (feedbackId) => {
		uni.navigateTo({
			url: `/pages/feedback/admin_feedback?feedback_id=${feedbackId}`
		});
	};

	// 页面挂载时获取数据
	onMounted(() => {
		fetchFeedbackList();
	});
</script>

<style scoped lang="scss">
	.feedback-container {
		width: 100%;
		background-color: #f5f5f5;
		padding: 20rpx;
		box-sizing: border-box;
		min-height: 100vh;
	}

	/* 搜索和创建按钮容器 */
	.search-create-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		gap: 16rpx;
	}

	/* 搜索输入容器 */
	.search-input-container {
		flex: 1;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 32rpx;
		padding: 0 20rpx;
		height: 80rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		border: 1rpx solid #e8e8e8;
	}

	/* 搜索图标 */
	.search-icon {
		font-size: 32rpx;
		color: #999;
		margin-right: 12rpx;
	}

	/* 搜索输入框 */
	.search-input {
		flex: 1;
		height: 100%;
		font-size: 28rpx;
		color: #333;
		background: transparent;
	}

	/* 搜索占位符 */
	.search-placeholder {
		color: #bfbfbf;
		font-size: 28rpx;
	}

	/* 清空按钮 */
	.clear-btn {
		padding: 8rpx;
		font-size: 24rpx;
		color: #999;
		border-radius: 50%;
		background-color: #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 8rpx;
	}

	.clear-btn:active {
		background-color: #e0e0e0;
	}

	/* 创建反馈按钮 */
	.create-feedback-btn {
		background-color: #1677ff;
		color: white;
		padding: 20rpx 40rpx;
		border-radius: 32rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		white-space: nowrap;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2rpx 8rpx rgba(22, 119, 255, 0.2);
	}

	.create-feedback-btn .create-btn-text {
		color: #ffffff;
		font-size: 30rpx;
		font-weight: 500;
	}

	.create-feedback-btn:active {
		background-color: #0958d9;
		transform: scale(0.98);
		transition: all 0.2s;
	}

	/* 模态框样式 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.modal-content {
		background-color: white;
		overflow-y: auto;
		box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15);
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.modal-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}

	.close-btn {
		width: 50rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
		color: #999;
		padding: 10rpx;
	}

	.close-btn:active {
		opacity: 0.7;
	}

	.close-text {
		font-size: 48rpx;
		color: #999999;
	}

	.modal-body {
		padding: 32rpx;
	}

	/* 表单样式 */
	.form-item {
		margin-bottom: 52rpx;
	}

	.form-label {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
		font-weight: 500;
	}

	/* 反馈类型选项样式 */
	.feedback-type-options {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.type-option {
		padding: 18rpx 36rpx;
		border: 1rpx solid #d9d9d9;
		border-radius: 36rpx;
		background-color: #fafafa;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.type-option.active {
		border-color: #1677ff;
		background-color: #e6f4ff;
		color: #1677ff;
	}

	.type-text {
		font-size: 28rpx;
		color: #333;
	}

	.type-option.active .type-text {
		color: #1677ff;
		font-weight: 500;
	}

	/* 反馈内容输入框样式 */
	.content-input {
		width: 100%;
		min-height: 240rpx;
		border: 1rpx solid #d9d9d9;
		border-radius: 12rpx;
		padding: 24rpx;
		font-size: 28rpx;
		color: #333;
		background-color: #fff;
		box-sizing: border-box;
		line-height: 42rpx;
		resize: vertical;
	}

	.placeholder-text {
		color: #bfbfbf;
		font-size: 28rpx;
	}

	.char-count {
		font-size: 24rpx;
		color: #999999;
		float: right;
		margin-top: 10rpx;
		text-align: right;
		display: block;
	}

	/* 提交按钮样式 */
	.submit-btn {
		background-color: #1677ff;
		color: white;
	}

	.submit-btn.disabled {
		background-color: #d9d9d9;
		opacity: 0.7;
	}

	.submit-text {
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 500;
	}

	/* 错误提示样式 */
	.error-text {
		font-size: 26rpx;
		color: #ff4d4f;
		margin-top: 10rpx;
		display: block;
	}

	/* 图片上传样式 */
	.image-upload-section {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-bottom: 16rpx;
	}

	.add-image-btn {
		width: 200rpx;
		height: 200rpx;
		border: 2rpx dashed #d9d9d9;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fafafa;
	}

	.add-image-btn.disabled {
		opacity: 0.6;
	}

	.add-icon {
		font-size: 64rpx;
		color: #bfbfbf;
		margin-bottom: 8rpx;
	}

	.add-text {
		font-size: 24rpx;
		color: #999999;
	}

	.image-preview-item {
		width: 200rpx;
		height: 200rpx;
		position: relative;
		border-radius: 12rpx;
		overflow: hidden;
		background-color: #f5f5f5;
		transition: all 0.3s ease;
		border: 1rpx solid #e0e0e0;
	}

	.image-preview-item:active {
		transform: scale(0.95);
	}

	.delete-btn {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		width: 48rpx;
		height: 48rpx;
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		font-size: 32rpx;
		transition: background-color 0.3s ease;
	}

	.delete-btn:active {
		background-color: rgba(0, 0, 0, 0.8);
	}

	/* 图片状态指示器 */
	.image-status-indicator {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 4rpx 8rpx;
		font-size: 20rpx;
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0.5);
	}

	/* Loading动画 */
	.loading-spinner {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 40rpx;
		height: 40rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.3);
		border-top-color: #ffffff;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	/* 上传中覆盖层 */
	.uploading-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.4);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.upload-tip {
		font-size: 24rpx;
		color: #999999;
	}

	/* 进度条样式 */
	.progress-container {
		margin-top: 24rpx;
		padding: 0 20rpx;
	}

	.progress-bar {
		height: 16rpx;
		background-color: #f0f0f0;
		border-radius: 8rpx;
		overflow: hidden;
		margin-bottom: 8rpx;
	}

	.progress-fill {
		height: 100%;
		background-color: #07c160;
		transition: width 0.3s ease;
	}

	.progress-text {
		font-size: 24rpx;
		color: #666666;
		text-align: right;
	}

	/* 上传状态样式 */
	.upload-status {
		margin-top: 24rpx;
		padding: 0 20rpx;
		max-height: 300rpx;
		overflow-y: auto;
	}

	.image-status {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.image-name {
		font-size: 24rpx;
		color: #333333;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.status-badge {
		font-size: 22rpx;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
	}

	.status-pending {
		background-color: #fff9e6;
		color: #ff9500;
	}

	.status-uploading {
		background-color: #e6f4ff;
		color: #0066cc;
	}

	.status-success {
		background-color: #e6ffed;
		color: #07c160;
	}

	.status-error {
		background-color: #fff2f0;
		color: #ff3b30;
	}

	/* 状态容器样式 */
	.status-container {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	/* 重试按钮样式 */
	.retry-btn {
		font-size: 22rpx;
		padding: 4rpx 16rpx;
		background-color: #07c160;
		color: #ffffff;
		border-radius: 16rpx;
		border: none;
		min-height: 0;
		line-height: 1.5;
	}

	/* 提示消息样式 */
	.toast {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 24rpx 48rpx;
		border-radius: 12rpx;
		color: #ffffff;
		font-size: 28rpx;
		z-index: 9999;
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.12);
	}

	.toast.success {
		background-color: rgba(52, 199, 89, 0.9);
	}

	.toast.error {
		background-color: rgba(255, 69, 58, 0.9);
	}

	.toast-text {
		color: #ffffff;
	}

	.filter-section {
		margin: 20rpx;
	}



	.loading-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;

		.loading-spinner {
			width: 50rpx;
			height: 50rpx;
			border: 4rpx solid #f3f3f3;
			border-top: 4rpx solid #07c160;
			border-radius: 50%;
			animation: spin 1s linear infinite;
			margin-bottom: 20rpx;
		}

		.loading-text {
			font-size: 28rpx;
			color: #999999;
		}
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.error-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;

		.error-text {
			font-size: 28rpx;
			color: #ff4d4f;
			margin-bottom: 30rpx;
			text-align: center;
			padding: 0 40rpx;
		}

		.retry-btn {
			padding: 15rpx 50rpx;
			background-color: #07c160;
			border-radius: 30rpx;

			.retry-text {
				font-size: 28rpx;
				color: #ffffff;
			}
		}
	}

	.empty-container {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 200rpx 0;

		.empty-text {
			font-size: 28rpx;
			color: #999999;
		}
	}

	.feedback-list {
		padding: 0 20rpx;
	}

	/* 操作按钮样式 */
	.action-buttons {
		margin-top: 20rpx;
		display: flex;
		justify-content: flex-end;
	}

	.handle-feedback-btn {
		padding: 12rpx 32rpx;
		background-color: #07c160;
		color: #fff;
		border-radius: 20rpx;
		font-size: 28rpx;
		transition: all 0.3s ease;
	}

	.handle-feedback-btn:active {
		background-color: #06a755;
		transform: scale(0.95);
	}

	.handle-btn-text {
		font-size: 28rpx;
		color: #fff;
	}

	.feedback-item {
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		.user-info {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.username {
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
			}

			.user-role {
				font-size: 26rpx;
				color: #999999;
				background-color: #f5f5f5;
				padding: 5rpx 15rpx;
				border-radius: 15rpx;
			}
		}

		.feedback-meta {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.feedback-type {
				font-size: 28rpx;
				color: #07c160;
				background-color: #e6f7ef;
				padding: 5rpx 15rpx;
				border-radius: 15rpx;
			}

			.feedback-status {
				font-size: 28rpx;
				padding: 5rpx 15rpx;
				border-radius: 15rpx;
			}

			.status-1 {
				color: #faad14;
				background-color: #fffbe6;
			}

			.status-2 {
				color: #1890ff;
				background-color: #e6f7ff;
			}

			.status-3 {
				color: #52c41a;
				background-color: #f6ffed;
			}
		}

		.feedback-content {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			margin-bottom: 20rpx;
			word-break: break-all;
		}

		.handler-info,
		.result-info {
			margin-bottom: 15rpx;

			.handler-label,
			.result-label {
				font-size: 26rpx;
				color: #999999;
			}

			.handler-name,
			.result-content {
				font-size: 26rpx;
				color: #666666;
				margin-left: 10rpx;
			}
		}

		.images-container {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 20rpx;

			.image-item {
				width: 200rpx;
				height: 200rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				position: relative;
				overflow: hidden;
				border-radius: 10rpx;


				.image-type {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					background-color: rgba(0, 0, 0, 0.5);
					color: #ffffff;
					font-size: 22rpx;
					text-align: center;
					padding: 5rpx 0;
				}
			}
		}

		.time-info {
			display: flex;
			flex-direction: column;

			.create-time,
			.update-time {
				font-size: 24rpx;
				color: #999999;
				margin-bottom: 5rpx;
			}
		}
	}

	.loading-more,
	.no-more {
		text-align: center;
		padding: 30rpx 0;

		text {
			font-size: 26rpx;
			color: #999999;
		}
	}
</style>